<template>
  <div class="management">
    <div class="management_box">
      <!-- 个人信息区域 -->
      <div
        class="personal"
        @click="goPersonal"
      >
        <div class="personal_left">
          <div class="img">
            <!-- <u--image
              :showLoading="true"
              :src="personal.src"
              width="49px"
              height="61px"
            ></u--image> -->
            <u-icon
              :name="src"
              width="60"
              height="65"
            ></u-icon>
            <!-- <u-avatar :src="src" size="60"></u-avatar> -->
          </div>
          <div class="text">
            <u--text
              text="王芳"
              align="center"
              size="22"
            ></u--text>
          </div>
        </div>
        <div class="personal_right">
          <u-tag
            text="已认证"
            type="success"
            plain
          ></u-tag>
        </div>
      </div>
      <!-- 学籍信息 -->
      <div class="ul">
        <div class="li">
          <!--  -->
          <div class="li_icon1">
            <div class="shuxian"></div>
            <div class="icon">
              <u-icon
                :name="yuanquan"
                width="12"
                height="12"
              ></u-icon>
            </div>
          </div>
          <!--  -->
          <div class="li_data">
            <div class="data">
              <div class="title">入校年份:</div>
              <div class="val">1983年</div>
            </div>
            <div class="data">
              <div class="title">在校班级:</div>
              <div class="val">都高148班</div>
            </div>
            <div class="data">
              <div class="title">班主任:</div>
              <div class="val">张丹老师、王华老师</div>
            </div>
          </div>
          <!-- 拾忆 -->
          <div
            class="li_icon2"
            @click="goRecalling"
          >
            <u-icon
              :name="shiyi"
              width="22"
              height="22"
            ></u-icon>
            <u--text
              text="拾忆"
              color="#1990ff"
              size="13"
            ></u--text>
          </div>
        </div>
        <div class="li">
          <!--  -->
          <div class="li_icon1">
            <div class="shuxian"></div>
            <div class="icon">
              <u-icon
                :name="yuanquan"
                width="12"
                height="12"
              ></u-icon>
            </div>
          </div>
          <!--  -->
          <div class="li_data">
            <div class="data">
              <div class="title">入校年份:</div>
              <div class="val">1983年</div>
            </div>
            <div class="data">
              <div class="title">在校班级:</div>
              <div class="val">都高148班</div>
            </div>
            <div class="data">
              <div class="title">班主任:</div>
              <div class="val">张丹老师、王华老师</div>
            </div>
          </div>
        </div>
        <div class="li">
          <!--  -->
          <div class="li_icon1">
            <div class="shuxian"></div>
            <div class="icon">
              <u-icon
                :name="yuanquan"
                width="12"
                height="12"
              ></u-icon>
            </div>
          </div>
          <!--  -->
          <div class="li_data">
            <div class="data">
              <div class="title">入校年份:</div>
              <div class="val">1983年</div>
            </div>
            <div class="data">
              <div class="title">在校班级:</div>
              <div class="val">都高148班</div>
            </div>
            <div class="data">
              <div class="title">班主任:</div>
              <div class="val">张丹老师、王华老师</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 按钮 -->
    <div
      class="modele1"
      style="width: 100%; padding: 0px 10px; margin-top: 10px"
    >
      <button
        class="login_btn"
        type="primary"
        @click="addMessage"
        style="
          background: #1990ff;
          font-size: 18px;
          border-radius: 10px;
          margin-top: 100px;
        "
      >
        添加学籍信息
      </button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      src: "https://cdn.uviewui.com/uview/album/1.jpg",
      yuanquan: require("@/static/index/personal_yuanquan.png"),
      shiyi: require("@/static/index/personal_shiyi.png"),
    };
  },
  methods: {
    //
    addMessage() {
      uni.navigateTo({
        url: `/pages/alumniCertificate/alumniCertificate?id=2`,
      });
    },
    //点击拾忆
    goRecalling() {
      uni.navigateTo({
        url: `/pages/personal/shiyi`,
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.management {
  background: #eff1fd;
}
.management_box {
  background: white;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  // 个人信息区域
  .personal {
    width: 100%;
    display: flex;
    padding: 15px 8px;
    box-sizing: border-box;
    justify-content: space-between;
    align-items: center;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2), 0 0px 0px 0 rgba(0, 0, 0, 0.1);
    margin-bottom: 16px;

    .personal_left {
      display: flex;
      align-items: center;
      .img {
        margin-right: 20px;
      }
      .text {
        display: flex;
        flex-direction: column;
      }
    }
  }
  //学籍信息
  .ul {
    width: 100%;
    .li {
      display: flex;
      // 1
      .li_icon1 {
        width: 20%;
        position: relative;
        display: flex;
        justify-content: center;
        height: 85px;
        .shuxian {
          width: 1px;
          height: 100%;
          background: #eeeff1;
        }
        .icon {
          position: absolute;
          top: 5px;
          left: 50%;
          transform: translate(-50%);
        }
      }
      // 2
      .li_data {
        width: 70%;
        font-size: 16px;
        .data {
          display: flex;
        }
        .title {
          width: 32%;
        }
        .val {
          color: #999;
          width: 67%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
      // 3
      .li_icon2 {
        width: 10%;
        display: flex;
        flex-direction: column;
        align-self: flex-start;
      }
    }
  }
}
</style>